<!--交付物表格 -->
<!--:row-selection="rowSelection"-->
<template>
  <div class="taskTable">
    <a-table
      :row-selection="isRowsSelectVisible ? {
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          getCheckboxProps: getCheckboxProps,
          type: selectType,
        } : null"
      :pagination="false"
      :loading="loadVisible"
      :columns="tableColumns"
      :data-source="tableData"
      :customRow="rowHover"
      :rowKey="dataRowKeys"
    >
      <!--      交付物要求-->
      <template slot="deliverableName" slot-scope="text,record">
        <a-tooltip>
          <template slot="title">
            {{ text }}
          </template>
          <!--          <a class="" @click="routerDownDoc(record)">{{ text }}</a>-->
          {{ text }}
        </a-tooltip>
      </template>
      <!--      交付物：点击名称跳转至交付物详情；点击小眼睛预览(pdf格式)-->
      <template slot="subjectName" slot-scope="text, record">
        <div class="deliverable_div">
          <a-tooltip v-if="text">
            <template slot="title">
              {{ text }}
            </template>
            <a class="" style="margin-right: 5px;" @click="routerRequireDel(record)">{{ text }}</a>
          </a-tooltip>
          <div v-if="text">
            <img src="@/assets/todo/eye.png" style="width: 16px;height: 14px;cursor: pointer;"
                 v-if="showEye==record && record['subject.fileType'] == 'pdf'" @click="routerDownDoc(record,2)"/>
            <img v-else src="@/assets/todo/kongbai.png" style="width: 16px;height: 14px"/>
          </div>
          <a-button type="primary" v-else @click="openUploadModal(record)">上传</a-button>
        </div>
        <upload-delivery v-if="uploadVisible" :upload-modal-visible="uploadVisible" @closeUploadModal='closeUploadModal'
                         @submitDeliver='submitDeliver'></upload-delivery>
      </template>
      <!--      交付物-->
      <template slot="subjectNameNoUp" slot-scope="text, record">
        <div class="deliverable_div">
          <a-tooltip v-if="text">
            <template slot="title">
              {{ text }}
            </template>
            <a class="" style="margin-right: 5px"
               @click="routerRequireDel(record)">{{ text }} </a>
          </a-tooltip>
          <img src="@/assets/todo/eye.png" style="width: 16px;height: 14px;cursor: pointer;"
               v-if="showEye==record && text && record['subject.fileType'] == 'pdf'" @click="routerDownDoc(record,2)"/>
          <img v-else src="@/assets/todo/kongbai.png" style="width: 16px;height: 14px"/>
        </div>
      </template>
      <!--      交付物-->
      <template slot="subjectNameDelive" slot-scope="text, record">
        <div class="deliverable_div">
          <a-tooltip v-if="text">
            <template slot="title">
              {{ text }}
            </template>
            <a class="" style="margin-right: 5px"
               @click="routerDownDoc(record,1)">{{ text }} </a>
          </a-tooltip>
          <img src="@/assets/todo/eye.png" style="width: 16px;height: 14px;cursor: pointer;"
               v-if="text && (record.fileType && record.fileType=='pdf')" @click="routerDownDoc(record,2)"/>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import uploadDelivery from '@/components/uploadDelivery/index'
import {downloadDoc} from "@/api/fileSingle.js"
import {saveFile} from "@utils/util";
export default {
  name: "taskTable",
  data() {
    return {
      selectedRowKeys: [],
      headers: {},
      uploadVisible: false,//上传交付物弹框
      showEye: {},//显示交付物后的小眼睛
      thisRecord:{},//当前列数据
    };
  },
  components: {
    uploadDelivery,
  },
  props: {
    isRowsSelectVisible: {
      type: Boolean,
      default: false
    },/*首列选项显示隐藏*/
    selectType: {
      type: String,
      default: 'checkbox'
    },/*多选类型，单选或者多选*/
    tableName: {
      type: String,
      default: '执行任务-1'
    },//表格名称
    columns: {
      type: Array,
      default: () => []
    },//表格头
    tableData: {
      type: Array,
      default: () => []
    },//表格数据
    loadVisible: {
      type: Boolean,
      default: false
    },/*表格数据加载loading显示隐藏*/
    pagination: {
      type: [Object,Boolean],
      defalut: {
        pageSize: 3,
      },
    },
    dataRowKey: {
      type: String,
      default: ''
    },//rowkey
    tableColumns: {
      type: Array,
      default: () => [
        {
          title: "交付物要求",
          dataIndex: "deliverable.name",
          width: '22%',
          // ellipsis: true,
          scopedSlots: {customRender: "deliverableName"}
        },
        {
          title: "交付物",
          dataIndex: "subject.name",
          width: '40%',
          // ellipsis: true,
          scopedSlots: {customRender: "subjectName"}
        },
        {
          title: "是否最新版本",
          width: '19%',
          dataIndex: "deliverable.lastVersion"
        },
        {
          title: "交付物状态",
          width: '19%',
          dataIndex: "deliverable.targetStatus"
        }
      ]
    },//表格数据
    deliverId: {
      type: String,
      default: ''
    },//主交付物id
  },
  computed: {
    /*pagination() {
      if (this.data.length > 4) {
        return true;
      } else {
        return false;
      }
    },*/
    /*rowSelection() {
      if (this.tableName == '待审核任务' || this.tableName == '交付物列表') {
        return null
      } else {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            this.$emit('selectRowsEvent', selectedRows)
          },
          getCheckboxProps: record => ({
            props: {
              disabled: record.oid === this.deliverId && this.deliverId !== '', // Column configuration not to be checked
              name: record.name,
            },
          }),
        };
      }
    },*/
  },
  mounted() {
     console.log(this.tableColumns)
  },
  methods: {
    //表格主键
    dataRowKeys(record) {
      return record[this.dataRowKey]
    },
    //下载交付物
    routerDownDoc(val, eveKey) {
      console.log('交付物下载-----------------',val,eveKey)
      let docOid, docType, docName
      //oid
      if (val['subject.oid']) {
        docOid = val['subject.oid']
      } else if (val['oid']) {
        docOid = val['oid']
      }
      //格式
      if (val['subject.fileType']) {
        docType = val['subject.fileType']
      } else if (val['fileType']) {
        docType = val['fileType']
      }
      //名称
      if (val['subject.name']) {
        docName = val['subject.name']
      } else if (val['name']) {
        docName = val['name']
      }
      if (eveKey == 1 && val.canDownload=='true') {
        //下载
        downloadDoc({oid: docOid}).then((res) => {
          if (res) {
            const blob = new Blob([res.data], {type: 'application/octet-stream'})
            saveFile(blob, docName + '.' + (docType !== null ? docType : ''))
          } else {
            this.$message.warn('下载异常')
          }
        })
      } else if(val.canDownload=='true') {
        //预览
        downloadDoc({oid: docOid}).then((res) => {
          console.log(res)
          if (res) {
            const blob = new Blob([res.data], {type: 'application/pdf'})
            const blobUrl = window.URL.createObjectURL(blob)
            window.open(blobUrl)
          } else {
            this.$message.warn('预览异常')
          }
        })
      }else{
        this.$message.warn('无下载权限')
      }
    },
    //交付物跳转详情
    routerRequireDel(val) {
      // console.log('交付物要求跳转------------跳转至“文件”：', val)
      console.log(val)
      this.$emit('routerRequireDel', val)
    },
    //交付物预览
    routerSubmitDel(val) {
      console.log('交付物预览------------跳转至“文件”：', val)
      this.$emit("routerSubmitDel", val);
    },
    //打开上传交付物弹窗
    openUploadModal(val) {
      console.log('上传交付物：', val)
      this.uploadVisible = true
      this.thisRecord = val
    },
    //关闭上传交付物弹窗
    closeUploadModal() {
      this.uploadVisible = false
    },
    //行移入显示小眼睛
    rowHover(record, index) {
      // const _this = this
      return {
        on: {
          mouseenter: (event) => {
            // this.showEye[index] = true
            // this.showEye = _.clone(this.showEye)
            this.showEye = record
          },  // 鼠标移入行
          mouseleave: (event) => {
            // this.showEye[index] = false
            // this.showEye = _.clone(this.showEye)
            this.showEye = {}
          },
        },
      };
    },
    // 多选
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.$emit('selectRowsEvent', selectedRows)
    },
    // 默认选中
    getCheckboxProps(record) {
      return ({
        props: {
          disabled: (record.oid === this.deliverId && this.deliverId !== ''), // Column configuration not to be checked
          name: 'deliverable.targetStatus',
        },
      });
    },
    submitDeliver(val){
      // console.log('选择的交付物-----', val)
      this.$emit('uploadFile',val,this.thisRecord)
    },
  }
};
</script>
<style lang="less" scoped>
/deep/ .ant-table-tbody > tr.ant-table-row-selected td {
  background: #fff;
}
.upload {
  background: #386df3;
  width: 50px;
  height: 26px;
  color: #fff;
  text-align: center;
  line-height: 26px;
  border-radius: 2px;
}
/deep/ .multi-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 超出两行则以...形式隐藏
  -webkit-box-orient: vertical;
  cursor: pointer;
}
/deep/ .ant-table-tbody > tr > td {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  a {
    display: block;
  }
}
/deep/ .ant-table-tbody > tr > td {
  word-wrap: break-word;
  word-break: break-all;
  > span > div, a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.deliverable_div {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>